웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

[css] text-decoration 속성 알아보기

Last Modified : 2023-02-21 / Created : 2023-02-07
3,075
View Count
CSS를 사용하여 텍스트에 효과를 줄 수 있는 스타일 속성으로 text-decoration이 있습니다. 아래는 text-decoration을 사용하는 방법과 활용 방법에 대하여 자세히 알아보겠습니다.




# CSS 속성 text-decoration


css의 text-decoration 속성은 텍스트 사용하는 스타일 속성으로 윗줄(overline), 중간줄(line-through), 밑줄(underline) 효과를 줄 수 있습니다. 참고로 text-decoration은 단일로 사용 가능한 집합속성(subset property)이며 아래 css 속성들로 나뉘어 사용할 수 있습니다.

text-decoration-line // (중복사용) 텍스트 라인의 위치 및 스타일 방식을 설정(overline, line-through, underline, wavy ...)
text-decoration-color // 텍스트의 색상을 설정
text-decoration-thickness // 텍스트의 두께를 설정(px 단위 또는 from-font)

위 속성들을 함께 선언하여 아래와 같이 일반적으로 사용할 수 있습니다.
a[href] {
  text-decoration: underline red 2px;
}

각각의 스타일 속성을 하나씩 알아보겠습니다.

1. text-decoration-line 속성
제일 먼저 text-decoration-line 속성은 하나가 아닌 여러가지를 한 번에 사용 할 수 있는 특징이 있습니다. 즉 아래처럼 underline overline 혼합하여 사용도 가능하죠.
a{href] {
  text-decoration: underline overline 1px;
}

또한 라인의 위치에 해당하는 overline, line-through, underline 값들과 효과에 해당하는 wavy, blink 등으로 구분할 수 있습니다.(참고로 blink는 성능 등의 이슈로 현재는 잘 사용되지 않습니다.)


2. text-decoration-color 속성
다음으로 text-decoration-color는 말 그대로 색상을 결정하기 위해서 사용하며 필수가 아닌 선택 사항으로 자신 또는 부모 요소의 color 값을 상속 받아 나타나게 됩니다.


3. text-decoration-thickness 속성
마지막으로 text-decoration-thickness은 텍스트의 두께를 설정하는 데 사용합니다. 값은 두 가지가 사용되며 픽셀 또는 from-font 값을 사용할 수 있습니다. 이 속성 역시 필수가 아닌 선택 사항이며 기본값은 1px입니다. 참고로 from-font를 사용할 경우 상속된 폰트 크기에 상대적으로 변하는 두께 값을 가지게 됩니다. 다만 두께 값은 1px의 기본값을 가지게 됩니다.


! css-decoration 예제보기


위 소스 코드를 사용한 몇 가지 다양한 예제를 알아봅니다.

먼저 text-decoration-line 값들을 다양하게 적용한 경우의 예제입니다.
<span style="text-decoration: underline">text-decoration: underline</span>
<span style="text-decoration: overline">text-decoration: overline</span>
<span style="text-decoration: line-through">text-decoration: line-through</span>


<span style="text-decoration: underline">text-decoration: underline</span><br/>
<span style="text-decoration: overline">text-decoration: overline</span><br/>
<span style="text-decoration: line-through">text-decoration: line-through</span>


아래는 중복 사용하거나 wavy 값을 함께 사용한 경우입니다.
<span style="text-decoration: underline wavy">text-decoration: underline wavy</span>
<span style="text-decoration: line-through underline">text-decoration: line-through underline</span>
<span style="text-decoration: underline overline line-through">text-decoration: underline overline line-through</span>


<span style="text-decoration: underline wavy">text-decoration: underline wavy</span><br/>
<span style="text-decoration: line-through underline">text-decoration: line-through underline</span><br/>
<span style="text-decoration: underline overline line-through ">text-decoration: underline overline line-through </span>


다음으로 text-decoration-color를 사용하여 색상을 설정한 경우입니다.
<span style="text-decoration: underline red">text-decoration-line: underline red</span>
<span style="text-decoration: underline blue">text-decoration-line: underline blue</span>
<span style="text-decoration: underline green">text-decoration-line: underline green</span>
<span style="text-decoration: underline violet">text-decoration-line: underline violet</span>


<span style="text-decoration: underline red">text-decoration-line: underline red</span><br/>
<span style="text-decoration: underline blue">text-decoration-line: underline blue</span><br/>
<span style="text-decoration: underline green">text-decoration-line: underline green</span><br/>
<span style="text-decoration: underline violet">text-decoration-line: underline violet</span>


마지막으로 text-decoration-thickness를 사용하여 두께를 변경한 경우의 예제입니다.
<span style="text-decoration: underline">text-decoration-line: underline</span>
<span style="text-decoration: underline 1px">text-decoration-line: underline 1px</span>
<span style="text-decoration: underline 3px">text-decoration-line: underline 3px</span>
<span style="text-decoration: underline 5px">text-decoration-line: underline 5px</span>


<span style="text-decoration: underline">text-decoration-line: underline</span><br />
<span style="text-decoration: underline 1px">text-decoration-line: underline 1px</span><br />
<span style="text-decoration: underline 3px">text-decoration-line: underline 3px</span><br />
<span style="text-decoration: underline 5px">text-decoration-line: underline 5px</span><br />


다음은 from-font를 사용한 경우의 예제로 폰트 크기에 따라 자동으로 두께가 결정되어 나타납니다.
<span style="font-size: 10px; text-decoration: underline from-font;">font-size: 10px; text-decoration-line: underline from-font;</span>
<span style="font-size: 20px; text-decoration: underline from-font;">font-size: 20px; text-decoration-line: underline from-font;</span>
<span style="font-size: 30px; text-decoration: underline from-font;">font-size: 30px; text-decoration-line: underline from-font;</span>


<span style="font-size: 10px; text-decoration: underline from-font;">font-size: 10px; text-decoration-line: underline from-font;</span><br />
<span style="font-size: 30px; text-decoration: underline from-font;">font-size: 30px; text-decoration-line: underline from-font;</span><br />
<span style="font-size: 50px; text-decoration: underline from-font;">font-size: 50px; text-decoration-line: underline from-font;</span><br />


여기까지 css 텍스트에 스타일에 사용하는 text-decoration에 대하여 간략하게 알아봤습니다.


! 기타 및 참고사항



Q. text-decoration-thickness 속성을 중복해서 가질 수 있을까?
; 좀 더 두꺼운 두께를 font 크기에 상대적으로 적용해보려고 테스트 해보았으나 현재까지는 복수 설정되지 않습니다.


Q. text-decoration-line의 위치를 조정할 수 있을까?
; underline의 경우 조절이 가능한 text-underline-offset 속성이 있습니다. 다만 underline인 경우만 가능하고 음수값(negative value) 적용이 안된다는 단점이 있습니다.


underline overline decoration
아래의 글도 찾고 계시지 않나요?

Previous

css 속성 position: fixed 사용시 부모 요소에 relative 이슈 해결

Previous

css 스타일 속성 text-underline-offset 알아보기